<template>
    <div>
        <div style="height:1.06667rem;"></div>
        <van-tabs v-model="active" swipeable>
        <van-tab v-for="i in imageTitle" :title="i.title" :key="i.id">
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
                >
                <ul class="img_list">
                    <li :key="i.id" v-for="i in imgList" @click="imgById(i.id)">
                        <div  class="van-image" style="width: 100px; height: 100px;">
                        <van-image class="van-image__img" width="100%" height="100%" lazy-load
                        :src="i.img_url"/></div>
                        <div class="botInfo">
                        <p>{{i.title}}</p>
                        <p>{{i.zhaiyao}}</p>
                        </div>
                    </li>
                </ul>
                </van-list>
            </van-pull-refresh>
        </van-tab>
</van-tabs>
    </div>
</template>

<script>

export default {
  data () {
    return {
      active: '',
      imageTitle: [],
      all: {
        title: '全部',
        id: 0
      },
      imgList: [],
      loading: false,
      refreshing: false,
      finished: false
    }
  },
  methods: {
    async getimgcategory () {
      const { data: res } = await this.$http.get('/api/getimgcategory')
      this.imageTitle = res.message
    },
    async getimglist () {
      const { data: res } = await this.$http.get('/api/getimages/' + this.all.id)
      this.imgList = res.message
      console.log(res)
    },
    onLoad () {
      if (this.refreshing) {
        setTimeout(() => {
          this.imgList = []
          this.refreshing = false
          this.loading = false
          this.getimglist()
          if (this.imgList.length > 0) {
            this.finished = true
          }
        }, 1000)
      }
    },
    onRefresh () {
      // 清空列表数据
      this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    },
    imgById (id) {
      this.$router.push('/imagesDetali/' + id)
    }
  },
  created () {
    this.getimgcategory()
    this.getimglist()
  }
}
</script>

<style lang="less" scoped>
.img_list {
  padding: 0 10px;
  margin: 0;
  list-style: none;
}
.img_list li {
    width: 100%;
    margin: 10px 0;
    border-radius: 5px;
    overflow: hidden;
    height: 300px;
    min-height: 200px;
    position: relative;
}

.van-image {
    position: relative;
    display: inline-block;
    width: 100%!important;
    height: 100%!important;
}

.van-image__img {
  // position: absolute;

  display: block;
  width: 100%!important;
  height: 100%!important;
}
.botInfo {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0,0,0,.4);
    color: #fff;
    padding: 0 10px;
}
.botInfo p {
  font-size: 12px;
}
</style>
